<template>
  <div class="box">
    <div class="top">
        <button v-for="(item , index) in arr" :key="index" @click="add(item , index)" :class="change2 === index ? 'change2' : ''">{{item}}元</button>
    </div>
    <div class="center">
        <input type="text" placeholder="请输入金额" v-model="from">
    </div>
    <div class="bottom">
        <button v-for="(item , index) in text" :key="index" @click=" from >= 100 ? quanyi(item , index) : '' " :class="change1 == index ? 'change1' : ''">{{item}}</button>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            arr:[10,20,50,100,200,300],
            from:'',
            text:['200分钟' , '10G' , '9.9元'],
            change1: null,
            change2:null
        }
    },
    methods:{
        add(item , index){
            this.from = item
            this.change1 = null
            this.change2 == index ? this.change2 = null : this.change2 = index
        },
        quanyi(item , index){
            this.change2 = null
            this.change1 == index ? this.change1 = null : this.change1 = index
        }
    }
}
</script>

<style scoped src="./three.css">
</style>